<%@page import="com.caresms.service.Keyword_MasterLocalServiceUtil"%>
<%@page import="com.caresms.model.Keyword_Master"%>
<%@page import="com.caresms.service.Category_MasterLocalServiceUtil"%>
<%@page import="com.caresms.model.Category_Master"%>
<%@page import="java.util.List"%>
<%@ taglib uri="http://java.sun.com/portlet_2_0" prefix="portlet" %>
<%@ taglib uri="http://alloy.liferay.com/tld/aui" prefix="aui" %>
<html>

<portlet:resourceURL var="fetchKeyValues" id="fetchcombo"></portlet:resourceURL>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script>
var characterLimit = 0;
$(document).ready(function () {
    $("#lblremaingCharacters").html(characterLimit);
    $("#meTextarea").bind("keyup", function () {
        var characterInserted = $(this).val().length;
       // if (characterInserted > characterLimit) {
       //     $(this).val($(this).val().substr(0, characterLimit));
     //   }
        var characterRemaining = characterLimit + characterInserted;
        document.getElementById("hdnsize").value=characterRemaining;
        $("#lblremaingCharacters").html(characterRemaining);
    });
});
function SelectMoveRows(SS1,SS2)
{
	//alert("asffa");
    var SelID='';
    var SelText='';
    // Move rows from SS1 to SS2 from bottom to top
    for (var i=SS1.options.length - 1; i>=0; i--)
    {
        if (SS1.options[i].selected == true)
        {
            SelID=SS1.options[i].value;
            SelText=SS1.options[i].text;
            var newRow = new Option(SelText,SelID);
            SS2.options[SS2.length]=newRow;
            SS1.options[i]=null;
        }
    }
    SelectSort(SS2);
}
function SelectSort(SelList)
{
    var ID='';
    var Text='';
    for (var x=0; x < SelList.length - 1; x++)
    {
        for (var y=x + 1; y < SelList.length; y++)
        {
            if (SelList[x].text > SelList[y].text)
            {
                // Swap rows
                ID=SelList[x].value;
                Text=SelList[x].text;
                SelList[x].value=SelList[y].value;
                SelList[x].text=SelList[y].text;
                SelList[y].value=ID;
                SelList[y].text=Text;
            }
        }
    }
}

$(document).ready(function() {
	        $("#category").change(function() {
	var keyId=$("#category").val();
	var action="first";
	document.getElementById("Features").innerHTML="";
	
	                        var url = "<%=fetchKeyValues%>";
	            $.post(url, {keyId : keyId, action:action}, function(data)  {
	                  
	//if your data is seperated by comma
	
	for(var z=0; z<data.dataarray.length;z++){
		
		dataarray = data.dataarray[z].split(":");
	                         $("#Features").append("<option value="+dataarray[0]+">'"+dataarray[1]+"'</option>");
	}
	});
	        });
});
</script>
<portlet:actionURL name="smsAction" var="smsActionURL"></portlet:actionURL>
<form name="smscontent" method="post" action="<%=smsActionURL.toString()%>">
<table border="0" cellpadding="3" cellspacing="0">
    <tr>
        <td>
        <%
        List<Category_Master> cm=Category_MasterLocalServiceUtil.getCategory_Masters(-1,-1);
        
        %>
        <p>Category</p>
        <select id="category" name="category">
        <option value="null" selected="selected">--select--</option>
        <%
        for(Category_Master c:cm)
        {
        %>
   			<option value="<%=c.getCatId()%>"><%=c.getCatName() %></option>
   			<%}
   			%>
  		</select>
</td>
</tr>
<tr>
<td><p>Keywords</p>
			<div id="keysize"></</div>
            <select id="Features" name="Features" size="20" multiple="multiple" style="width: 200px;">
              
            </select>
         </td>
        
        <td align="center" valign="middle">
            <input type="Button" value="Add >>" style="width:100px" onClick="SelectMoveRows(this.form.Features,this.form.FeatureCodes)"><br>
            <br>
            <input type="Button" value="<< Remove" style="width:100px" onClick="SelectMoveRows(this.form.FeatureCodes,this.form.Features)">
        </td>
        
        <td>
            <select id="FeatureCodes" name="FeatureCodes" size="20" multiple="multiple" style="width: 200px;">
             
            </select>
        </td>
        <td>
      <input type="hidden" id="hdnview" name="hdnview">
      <input type="hidden" id="hdnsize" name="hdnsize">
    <div class="smstextarea" style="margin-left:50px;">
    SMS Content
    <br />
    <textarea name="meTextarea" id="meTextarea" style="height: 152px;width: 227px;"></textarea><br />
    <label id="lblremaingCharacters" style="color:Red;font-weight:bold"></label><label> characters are inserted.</label><br>
    <input type="checkbox" name="isActive" id="isActive" checked="checked">
    
  <input type="button" value="submit" onclick="return reloadALL()">
    
    </div>
   
    </td>
    </tr>
</table>
  
</form>


<script type="text/javascript">
function reloadALL()
{
	var x=document.getElementById("FeatureCodes");
	
	var listvalue="";
	for(var i=0;i<x.options.length;i++)
		{
		listvalue+=x.options[i].value+",";
		}
	document.getElementById("hdnview").value=listvalue;
	document.smscontent.submit();
}
</script>
</html>
